<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            display: flex;
            gap: 20px;
        }

        .main-content {
            flex: 3;
        }

        .chat-container {
            flex: 1;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            padding: 20px;
            height: fit-content;
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }

        .toolbar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 15px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        .search-box {
            display: flex;
            gap: 10px;
        }

        .search-box input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .search-box button {
            background-color: #2196F3;
            color: white;
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .add-course-btn {
            background-color: #4CAF50;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        .add-course-btn:hover,
        .search-box button:hover {
            opacity: 0.9;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        th {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            text-align: left;
        }

        td {
            padding: 12px 15px;
            border-bottom: 1px solid #ddd;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        .action-btn {
            background-color: #4CAF50;
            color: white;
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .action-btn:hover {
            background-color: #45a049;
        }

        .chat-header {
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .toggle-chat {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: #666;
        }

        .chat-messages {
            height: 300px;
            overflow-y: auto;
            border: 1px solid #eee;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 5px;
            background-color: #fafafa;
        }

        .message {
            margin-bottom: 10px;
            padding: 8px;
            border-radius: 5px;
        }

        .user-message {
            background-color: #dcf8c6;
            text-align: right;
        }

        .bot-message {
            background-color: #e5e5ea;
        }

        .chat-input {
            display: flex;
            gap: 10px;
        }

        .chat-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .chat-input button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
        }

        .chat-input button:hover {
            background-color: #45a049;
        }

        .chat-toggle-icon {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 60px;
            height: 60px;
            background-color: #4CAF50;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            z-index: 1000;
        }
    </style>
</head>
<body>
<h1>课程管理系统</h1>

<div class="container">
    <div class="main-content">
        <div class="toolbar">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="请输入课程名称">
                <button onclick="searchCourse()">搜索</button>
            </div>
            <button class="add-course-btn" onclick="addCourse()">新增课程</button>
        </div>

        <table>
            <thead>
            <tr>
                <th>编号</th>
                <th>课程名称</th>
                <th>简介</th>
                <th>教师</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tb">
            <!-- 数据将通过 AJAX 加载 -->
            </tbody>
        </table>
    </div>

    <div class="chat-container" id="chatContainer">
        <div class="chat-header">
            <span>在线客服</span>
            <button class="toggle-chat" onclick="toggleChat()">−</button>
        </div>
        <div class="chat-messages" id="chatMessages">
            <div class="message bot-message">您好！有什么可以帮助您的吗？</div>
        </div>
        <div class="chat-input">
            <input type="text" id="messageInput" placeholder="输入您的问题...">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>
</div>

<div class="chat-toggle-icon" id="chatToggleIcon" onclick="toggleChatIcon()" style="display: none;">💬</div>

<script src="/js/jquery.min.js"></script>
<script>
    $(function (){
        showCourse();
    });

    function showCourse(){
        $.ajax({
            url:"/course/query",
            method:'get',
            dataType:'json',
            success:function (res){
                $("#tb").empty();
                var row ='';
                $.each(res,function (i,v){
                    row = row + "<tr><td>"+v.id+"</td><td>"+v.cname+"</td><td>"+v.mark+"</td><td>"+v.tea+"</td><td><button class='action-btn' onclick='del("+v.id+")'>删除</button><button class='action-btn' onclick='edit("+v.id+")'>修改</button></td></tr>";
                });
                $("#tb").append(row);
            }
        });
    }

    // 新增搜索功能
    function searchCourse() {
        var keyword = $("#searchInput").val().trim();
        if (keyword == "") {
            return;
        }

        $.ajax({
            url: "/course/query",
            method: 'get',
            data: { cname: keyword },
            dataType: 'json',
            success: function(res) {
                $("#tb").empty();
                var row = '';
                $.each(res, function(i, v) {
                    row = row + "<tr><td>"+v.id+"</td><td>"+v.cname+"</td><td>"+v.mark+"</td><td>"+v.tea+"</td><td><button class='action-btn'  onclick='del("+v.id+")'>删除</button></td></tr>";
                });
                $("#tb").append(row);
            }
        });
    }

    // 新增添加课程功能
    function addCourse() {
        // var courseName = prompt("请输入课程名称:");
        // if (courseName) {
        //     // 这里应该调用后端API添加课程
        //     alert("添加课程功能需要后端支持，这里仅作演示");
        // }
        //跳转到新增页面
        window.location.href = "/course/add";//后端controller方法路径
    }

    function sendMessage() {
        var input = document.getElementById('messageInput');
        var message = input.value.trim();


        if (message) {
            // 显示用户消息
            var chatMessages = document.getElementById('chatMessages');
            var userMessageDiv = document.createElement('div');
            userMessageDiv.className = 'message user-message';
            userMessageDiv.textContent = message;
            chatMessages.appendChild(userMessageDiv);
            // 发起sse: 服务端推送 Server-Sent Events
            var source = new EventSource('/ai/generateStreamAsString?message=' + message);
            source.onmessage = function(event) {
                // 模拟回复（实际应用中应调用后端API）
                var botMessageDiv = document.createElement('div');
                botMessageDiv.className = 'message bot-message';
                if (event.data === '[complete]') {
                    console.log(event)

                    source.close();
                    // 每次对话完后刷新列表
                    window.currentBotMessageDiv = null; // 清理全局变量
                    return;
                }
                // 如果还没有创建bot消息元素，则创建一个
                if (!window.currentBotMessageDiv) {
                    window.currentBotMessageDiv = document.createElement('div');
                    window.currentBotMessageDiv.className = 'message bot-message';
                    chatMessages.appendChild(window.currentBotMessageDiv); // 立即添加到DOM中，以便后续更新
                }
                // 累积文本内容
                window.currentBotMessageDiv.textContent += event.data;

                // 滚动到底部
                chatMessages.scrollTop = chatMessages.scrollHeight;
                showCourse();
            };
            // 清空输入框
            input.value = '';

            // 模拟回复（实际应用中应调用后端API）
            // setTimeout(function() {
            //     var botMessageDiv = document.createElement('div');
            //     botMessageDiv.className = 'message bot-message';
            //     botMessageDiv.textContent = "感谢您的提问，我们会尽快回复您！";
            //     chatMessages.appendChild(botMessageDiv);
            //
            //     // 滚动到底部
            //     chatMessages.scrollTop = chatMessages.scrollHeight;
            // }, 1000);

            // 滚动到底部
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
    }

    // 回车发送消息
    document.getElementById('messageInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });

    // 回车搜索课程
    document.getElementById('searchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            searchCourse();
        }
    });

    // 切换聊天窗口显示/隐藏
    function toggleChat() {
        var chatContainer = document.getElementById('chatContainer');
        var toggleButton = document.querySelector('.toggle-chat');
        var chatToggleIcon = document.getElementById('chatToggleIcon');

        if (chatContainer.style.display === 'none') {
            // 显示聊天窗口
            chatContainer.style.display = 'block';
            toggleButton.textContent = '−';
            chatToggleIcon.style.display = 'none';
        } else {
            // 隐藏聊天窗口
            chatContainer.style.display = 'none';
            chatToggleIcon.style.display = 'flex';
        }
    }

    // 点击图标显示聊天窗口
    function toggleChatIcon() {
        var chatContainer = document.getElementById('chatContainer');
        var chatToggleIcon = document.getElementById('chatToggleIcon');

        chatContainer.style.display = 'block';
        chatToggleIcon.style.display = 'none';
    }
    function del(i){
        $.ajax({
            url:"/course/del",
            method:'get',
            data:{id:i},
            dataType:'json',
            success:function (res){

                showCourse();
            }
        })
    }
    function edit(id){
      window.location.href = "/course/edit?id="+id;
    }
</script>
</body>
</html>
